import React from 'react';
import { Button, Card,List, Avatar } from 'antd';
const data = [
    {
        title: 'Ant Design Title 1',
    },
    {
        title: 'Ant Design Title 2',
    },
    {
        title: 'Ant Design Title 3',
    },
    {
        title: 'Ant Design Title 4',
    },
];
export default () => {
    return (
        <div>
            <Card title="推荐作者" extra={<a href="#">更多</a>} >
                <List
                    itemLayout="horizontal"
                    dataSource={data}
                    renderItem={item => (
                        <List.Item>
                            <List.Item.Meta
                                avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                                title={<a href="https://ant.design">{item.title}</a>}
                                description="Ant Design"
                            />
                        </List.Item>
                    )}
                />
            </Card>
            <style jsx global>
            {`
            .ant-card-head{
                padding: 0 10px;
            }
            .ant-card-body{
                padding: 0 10px;
            }
            `}
            </style>

        </div>
    )
}